<!-- 购物车列表组件 -->
<template>
  <div class="cart_item">
    <!-- 左侧复选框按钮 -->
    <van-checkbox v-model="cartItemChecked" checked-color="#ee0a24" />

    <!-- 右侧内容区域 -->
    <div class="container" @click="handleRouter">
      <!-- 左侧商品图 -->
      <img :src="cart.image">

      <!-- 右侧商品信息 -->
      <div class="info">
        <!-- 商品标题 -->
        <p class="title">
          {{ cart.title }}
        </p>

        <!-- 商品详情 -->
        <p class="detail">
          <!-- 商品价格 -->
          <span class="price">￥{{ cart.price }}</span>

          <!-- 商品数量操作 -->
          <van-stepper
            v-model="cartItemCount"
            button-size="26px"
            min="1"
            :max="cart.stock"
            @click.stop
          />
        </p>

        <!-- 删除操作 -->
        <p class="delete">
          <span>删除</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
// -------------------------------- 导入模块 ---------------------------------
// 导入 vue3 的 API
import { toRefs, computed } from 'vue'
// 导入 vue-router 的 API
import { useRouter } from 'vue-router'
// 导入 cart 的状态管理
import { useCartStore } from '@/store_pinia'

// 导入 vant 组件，按需引入
import {
  Checkbox as VanCheckbox,
  Stepper as VanStepper
} from 'vant'

// -------------------------------- 声明数据 ---------------------------------
// 接收父组件传递的数据
const props = defineProps({
  cart: {
    type: Object,
    required: true
  }
})
// 1、cart：商品列表数据
const { cart } = toRefs(props)

const router = useRouter() // 初始化路由实例
const cartStore = useCartStore() // 初始化状态管理
// 更改商品的勾选状态
const cartItemChecked = computed({
  get: () => cart.value.checked,
  set: newValue => {
    // 通过 pinia 进行商品勾选状态更新
    cartStore.changeChecked(newValue, cart.value.id)
  }
})
// 更改商品的数量
const cartItemCount = computed({
  get: () => cart.value.count,
  set: newValue => {
    // 通过 pinia 进行商品的数量修改
    cartStore.changeCount(cart.value.id, newValue)
  }
})

// -------------------------------- 函数封装 ---------------------------------
const handleRouter = () => {
  router.push({
    name: 'product',
    params: {
      productId: cart.value.productId
    }
  })
}
</script>

<style lang="scss" scoped>
// 整体区域
.cart_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  margin-bottom: 1px;
  padding: 10px 20px;
  background-color: #ffffff;

  // 商品内容区域
  .container {
    display: flex;
    width: 100%;

    // 商品图片
    img {
      width: 88px;
      height: 88px;
      margin: 0 10px;
      align-self: center;
    }

    // 商品信息区域
    .info {
      font-size: 14px;

      // 商品标题
      .title {
        margin: 5px 0 15px;
        // 超过一行显示省略号
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 1;
      }

      .detail {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .price {
          font-size: 16px;
          color: #F2270C;
        }
      }

      .delete {
       direction: rtl;
      }
    }
  }
}
</style>
